<template>
  <div>
    <ContentTitle :info="ctInfo" />
    <el-table :data="securityList" style="width: 100%">
      <el-table-column prop="id" label="编号"> </el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.cTime | uTimeType }}
        </template>
      </el-table-column>
      <el-table-column prop="authority" label="标签"> </el-table-column>
      <el-table-column prop="tag" label="权限"> </el-table-column>
      <el-table-column  label="状态">
      <template slot-scope="scope">
          {{ scope.row.online | onlineType }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <el-button type="primary" icon="el-icon-edit" circle></el-button>
        <el-button type="danger" icon="el-icon-delete" circle></el-button>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import ContentTitle from "@/components/ContentTitle.vue";
import { $securityList } from "@/api/index.js";
export default {
  name: "list",
  components: { ContentTitle },
  data() {
    return {
      ctInfo: {
        type: "安全",
        text: "秘钥",
        msg: "展示所有自定义的侧脸类型，提供了添加测量类型、修改测量类型、删除测量类型等功能",
      },
      securityList: [],
    };
  },
  filters: {
    //在线状态的过滤器
    onlineType(value) {
      return value ? "使用中" : "未使用";
    },
    uTimeType(value) {
      let date = new Date(value);
      let y = date.getFullYear(); // 获取完整的年份(4位,1970)
      let m = date.getMonth()+1; // 获取月份(0-11,0代表1月,用的时候记得加上1)
      let d = date.getDate(); // 获取日(1-31)
      let y1 = y < 10 ? "0" + y : y;
      let m1 = m < 10 ? "0" + m : m;
      let d1 = d < 10 ? "0" + d : d;
      return `${y1} - ${m1} - ${d1}`;
    },
  },
  created() {
    this.getSecurity();
  },
  methods: {
    getSecurity() {
      $securityList().then((res) => {
        console.log(res);
        this.securityList = res.data.data;
      });
    },
  },
};
</script>

<style>
</style>